<template>
    <div class="linktype-list">
        <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
            <FormItem>
                <Input v-model="formItem.key" placeholder="输入关键词查找"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="renderTable()">查找</Button>
            </FormItem>
        </Form>
        <div class="action-btn">
            <Button size="small" @click="removeMultiple()" style="margin-right: 8px" type="error">批量删除</Button>
            <Button size="small" @click="showModal()" type="success">添加分类</Button>
        </div>
        <Table border ref="linkTypeList" :columns="tableColumn" :data="dataList" :loading="dataLoading"
            @on-selection-change="changeData($event)">
            <template #action="{ row, index }">
                <Button type="info" size="small" style="margin-right: 5px;float:left"
                    @click="showEdit(row.id)">编辑</Button>
                <Button type="error" size="small" @click="removeDetail(index, row.id)">删除</Button>
            </template>
        </Table>
        <!-- 分页 -->
        <div class="table-page">
            <Page size="small" ref="listPage" :total="pages.total" :model-value="pages.current" :page-size="pages.size"
                show-elevator show-total @on-change="changePage"></Page>
        </div>
        <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
        <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="详情" width="640"
            v-model="showModalStatus">
            <Spin size="large" fix v-if="loading"></Spin>
            <Form :model="detailInfo" ref="linkTypeValidate" label-position="right" :label-width="80"
                :rules="linkTypeValidate" action="javascript:void(0)">
                <FormItem label="名称" prop="name">
                    <Input v-model="detailInfo.name" placeholder="输入名称"></Input>
                </FormItem>
                <FormItem>
                    <Button style="margin-right: 8px" @click="showModalStatus = false">取消</Button>
                    <Button type="primary" @click="handleSubmit('linkTypeValidate')">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
    </div>
</template>
    
<script>
export default {
    name: 'LinkType',
    data() {
        return {
            detail_id: 0,
            loading: false,
            dataLoading: true,
            formItem: {
                key: ''
            },
            pages: {
                current: 1,
                total: 0,
                size: 10
            },
            tableColumn: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: 'Id',
                    key: 'id',
                    width: 60,
                },
                {
                    title: '名称',
                    minWidth: 300,
                    key: 'name',
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 130,
                }
            ],
            dataList: [],
            detailInfo: {
                name: ''
            },
            showModalStatus: false,
            linkTypeValidate: {
                name: [
                    { required: true, message: '名称必须填写', trigger: 'blur' }
                ]
            },
            selectData: []
        }
    },
    created() {
        this.getTableList();
    },
    methods: {
        changePage() {
            this.pages.current = this.$refs['listPage'].currentPage;
            this.getTableList();
        },
        getTableList() {
            var params = this.formItem;
            params.size = this.pages.size;
            params.page = this.pages.current;
            this.$api.linktype.list(params).then(res => {
                this.dataList = res.result.list;
                this.pages.total = res.result.count
            }).finally(e => {
                this.dataLoading = false;
            });
        },
        renderTable() {
            this.pages.currentPage = 1;
            this.getTableList();
        },
        changeData(index) {
            this.selectData = index
        },
        showModal() {
            this.showModalStatus = !this.showModalStatus;
            this.detailInfo = { name: '' };
            this.detail_id = 0;
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                this.loading = true;
                if (valid) {
                    if (this.detail_id == 0) {
                        this.$api.linktype.create(this.detailInfo).then(res => {
                            this.getTableList();
                            this.showModalStatus = !this.showModalStatus;
                        }).finally(res => {
                            this.loading = false;
                        });
                    } else {
                        this.detailInfo.detail_id = this.detail_id
                        this.$api.linktype.update(this.detailInfo).then(res => {
                            this.getTableList();
                            this.showModalStatus = !this.showModalStatus;
                        }).finally(res => {
                            this.loading = false;
                        });
                    }
                } else {
                    this.$Message.error('请检查输入的信息是否正确');
                    this.loading = false
                }
            })
        },
        showEdit(id) {
            this.detail_id = id;
            this.loading = true;
            this.$api.linktype.detail({ detail_id: id }).then(res => {
                this.detailInfo = res.result
            }).finally(e => {
                this.loading = false;
            });
            this.showModalStatus = !this.showModalStatus;
        },
        removeDetail(index, id) {
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行</p>',
                onOk: () => {
                    this.$api.linktype.remove({ detail_id: [id] }).then(res => {
                        this.dataList.splice(index, 1);
                    });
                }
            });
        },
        removeMultiple() {
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行</p>',
                onOk: () => {
                    var ids = [];
                    this.selectData.forEach((item) => {
                        ids.push(item.id);
                    })
                    this.$api.linktype.remove({ detail_id: ids }).then(res => {
                        this.getTableList();
                    });
                }
            });
        },
    }
}
</script>